@import '../../styles/vars';

.psv-markers {
  user-select: none;
  position: absolute;
  z-index: $psv-hud-zindex;
  width: 100%;
  height: 100%;

  &-svg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: $psv-polygon-marker-zindex;
  }
}

.psv-marker {
  display: none;

  &--normal {
    position: absolute;
    top: 0;
    left: 0;
    z-index: $psv-marker-zindex;
    background-size: contain;
    background-repeat: no-repeat;
  }

  &--transparent {
    display: block;
    opacity: 0;
  }

  &--visible {
    display: block;
  }

  &--has-tooltip,
  &--has-content {
    cursor: pointer;
  }
}

.psv-markers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;

  &-title {
    display: flex;
    align-items: center;
    font: $psv-panel-title-font;
    margin: $psv-panel-title-margin 0;

    svg {
      width: $psv-panel-title-icon-size;
      height: $psv-panel-title-icon-size;
      margin: 0 $psv-panel-title-icon-size / 2;
    }
  }

  &-item {
    clear: both;
    min-height: $psv-markers-list-image-size;
    padding: $psv-markers-list-padding;
    cursor: pointer;
    transform: translateX(0);
    transition: transform .3s ease-in-out;

    // pseudo-element used to fill the gap of the hover translation
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: $psv-markers-list-hover-translation;
      margin-left: -$psv-markers-list-hover-translation;
    }

    &:nth-child(odd),
    &:nth-child(odd)::before {
      background: $psv-markers-list-odd-background;
    }

    &:nth-child(even),
    &:nth-child(even)::before {
      background: $psv-markers-list-even-background;
    }
  }

  &-image {
    float: left;
    width: $psv-markers-list-image-size;
  }

  .psv-button-svg {
    * {
      fill: currentColor;
    }
  }

  &-name {
    margin: 0;
    padding: 0;
  }

  &-image + &-name {
    padding-left: calc(#{$psv-markers-list-image-size} + #{nth($psv-markers-list-padding, 1)});
  }
}

.psv-container:not(.psv--is-touch) .psv-markers-list-item:hover {
  transform: translateX($psv-markers-list-hover-translation);
  transition: transform .1s ease-in-out;
}
